<template>
  <div class="wms-content-layout">
    <div class="forum-release-box">
      <input
          class="forum-title"
          type="text"
          v-model="$store.state.posting.title"
          required
          placeholder="请输入主题标题，如果标题能够表达完整内容，则正文可以为空"
      />
      <div class="forum-content">
        <quill-editor
            class="editor"
            v-model="$store.state.posting.content"
            :options="quillOption"
        ></quill-editor>
      </div>
      <el-button type="success" :disabled="newForum.status === 'submitting'" @click="releaseForum">发布</el-button>
    </div>

  </div>
</template>
<style scoped>
.wms-content-layout {
  width: 80%;
  border-radius: 0.5rem;
  margin: 0 auto;
}

.forum-release-box {
  background: #ffffff;
  border-radius: 0.04rem;
  padding: 0.4rem;
}

.forum-title {
  height: 0.5rem;
  width: 100%;
  padding: 0.2rem;
  font-size: 0.16rem;
  border: #cccccc solid 0.01rem;
  margin: 0 0 0.1rem 0;
}

.validate-error {
  border-color: #ff0000;
}

.forum-release {
  margin: 0.1rem 0 0 0;
  display: inline-block;
  padding: 0.05rem 0.25rem;
  line-height: 0.3rem;
  font-size: 0.14rem;
  color: #fff;
  background-color: #009a61;
  border-color: #008151;
  border-radius: 0.04rem;
}

.forum-display-box {
  background: #ffffff;
  border-radius: 0.08rem;
  padding: 0.2rem 0.4rem;
  margin-top: 0.2rem;
}

.head-img {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: 0.02rem solid #f6f6f6;
  overflow: hidden;
}

.head-img > img {
  width: 100%;
  height: 100%;
}

.forum-tile {
  font-size: 0.16rem;
  font-weight: 600;
  flex: 1;
  padding: 0 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forum-list-item {
  border-bottom: 0.02rem solid #f3f3f3;
}

.forum-list-item:last-child {
  border-bottom: null;
}

.forum-list-item-box {
  display: flex;
  padding: 0.2rem 0;
  align-items: center;
}
</style>
<script>
import {quillEditor} from "vue-quill-editor";
import config from "@/utils/editor";

export default {
  data() {
    return {
      newForum: {
        title: null,
        content: null,
        status: 'editing' // editing , submitting
      },
      forumList: [],
      quillOption: {
        placeholder: "请输入正文",
        theme: "snow",
        modules: config.modules
      },
    };
  },
  components: {
    quillEditor
  },
  mounted() {

  },
  methods: {
    antiShakeSubmit() {
      this.newForum.status = 'submitting';
      setTimeout(() => {
        this.newForum.status = 'editing'
      }, 2000)
    },
    releaseForum() {
      this.antiShakeSubmit();
      if (!this.$store.state.posting.title) {
        return this.$message.error("请输入标题")
      }
      this.$api.forumsApi.forumAdd({
        content: this.$store.state.posting.content,
        title: this.$store.state.posting.title,
      }).then(response => {
        if (response.status === 200 && response.data.code === 0) {
          this.$message.success("发帖成功")
          this.$store.commit("resetPosting")
        } else {
          this.$message.error("发帖失败")
        }
      })
    }
  }
};
</script>
